import React, { Component } from 'react';
import Toast from '../../components/Toast';
import request from '../../utils/fetch';

class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // showLogin: false,
      msg: '',
      text: '发送验证码',
      disabled: false,
      mobile: '',
      verify_code: '',
    }
  }
  handleChange(key, event) {
    this.setState({
      [key]: event.target.value
    })
  }
  regMobile(mobile) {
    const reg = /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
    let bl = reg.test(mobile)
    return bl
  }
  getCode() {
    if (!this.state.mobile) {
      this.setState({
        msg: '手机号码不能为空'
      })
      return
    }
    let bl = this.regMobile(this.state.mobile)
    if (bl) {
      request.get(`/web/sms/sendSmsCode?mobile=${this.state.mobile}`).then(res => {
        if (res.errcode === 5008) {
          this.setState({
            msg: '请输入正确的手机号码'
          })
          return
        }
        this.setState({
          disabled: true
        })
        let t = 60
        let timer = setTimeout(() => {
          this.setState({
            text: '重新发送' + t--
          })
          if (t <= 0) {
            clearTimeout(timer)
            this.setState({
              disabled: false,
              text: '发送验证码'
            })
            return
          }
          timer()
        }, 1000)
      }).catch(err => {
        console.log(err)
      })
    } else {
      this.setState({
        msg: '请输入正确的手机号码'
      })
    }
  }
  handleSubmit() {
    if (!this.state.mobile) {
      this.setState({
        msg: '手机号码不能为空'
      })
      return
    }
    let bl = this.regMobile(this.state.mobile)
    if (!bl) {
      this.setState({
        msg: '请输入正确的手机号码'
      })
      return
    }
    if (!this.state.verify_code) {
      this.setState({
        msg: '请输入验证码'
      })
      return
    }
    request.post('/web/merchant/loginByMobile', {
      mobile: this.state.mobile,
      verify_code: this.state.verify_code,
      source: 'pc',
      openid: 'dfsgfdhgjhkgkjhfs'
    }).then(res => {
      if (res.errcode === 200) {

      }
    })
  }
  clearMsg() {
    this.setState({
      msg: ''
    })
  }
  render() {
    return (
      <div>
        <div className={this.props.show ? 'modal modal-show login' : 'modal login'}>
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <h3 className="modal-title">商家申请</h3>
                <button className="close" onClick={this.props.close}>
                  <span>&times;</span>
                </button>
              </div>
              <div className="modal-body">
                <form>
                  <div className="form-group">
                    <input type="tel" value={this.state.mobile} onChange={this.handleChange.bind(this, 'mobile')} className="form-control form-control-lg" placeholder="请输入手机号码" maxLength="11" />
                  </div>
                  <div className="form-group input-group">
                    <input type="tel" value={this.state.verify_code} onChange={this.handleChange.bind(this, 'verify_code')} className="form-control form-control-lg" placeholder="请输入短信验证码" maxLength="6" />
                    <div className="input-group-append">
                      <button type="button" disabled={this.state.disabled} onClick={this.getCode.bind(this)} className="input-group-text btn-theme">{this.state.text}</button>
                    </div>
                  </div>
                  <button type="button" onClick={this.handleSubmit.bind(this)} className="btn btn-block btn-lg btn-theme">立即申请</button>
                </form>
              </div>
            </div>
          </div>
        </div>
        <Toast msg={this.state.msg} clearMsg={this.clearMsg.bind(this)}></Toast>
      </div>
    )
  }
}

export default Login